<!-- 搜索框 -->
<template>
  <view class="search-box">
    <view class="search-main" @click="click">
      <view class="content" :style="{color: keyword && !disabled ? '#000000' : '#999999'}">
        {{ keyword ? keyword : "请选择组织" }}
      </view>
      <view v-if="userInfo.user.org.sourceType !== '50'" class="inside-right-icon">
        <image v-if="keyword && !disabled" class="img" src="/static/image/pco/shutDown.png" @click.stop="clear"></image>
        <image v-else class="img" src="/static/image/pco/arrowhead.png" @click="click"></image>
      </view>
    </view>
    <view v-if="showRightIcon" class="right-icon" @click="rightClick">
      <view>误判</view>
      <view>记录</view>
    </view>
    <uv-picker ref="picker" :columns="[columns]" keyName="label" :title="title" @confirm="confirm"></uv-picker>
  </view>
</template>

<script setup>
  let emits = defineEmits(['clear', 'selectSearch', 'rightClick']);
  let props = defineProps({
    keyword: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showRightIcon: {
      type: Boolean,
      default: false
    }
  });

  let userInfo = ref(uni.getStorageSync('userInfo'));
  let picker = ref();

  let click = () => {
    if (!props.disabled) {
      picker.value.open();
    }
  };
  let clear = () => {
    emits('clear')
  }
  let confirm = (e) => {
    emits('selectSearch', e)
  };

  let rightClick = () => {
    if (props.showRightIcon) {
      emits('rightClick')
    }
  }
</script>

<style scoped lang="scss">
  .search-box {
    background: #3775f6;
    padding: 30rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .search-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 10rpx;
    background: #ffffff;
    height: 70rpx;
    line-height: 70rpx;
  }
  .content {
    width: 85%;
    padding: 0 20rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .inside-right-icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 15%;
  }
  .inside-right-icon .img {
    width: 30rpx;
    height: 30rpx;
  }

  .right-icon {
    width: 50rpx;
    margin-left: 30rpx;
    font-size: 22rpx;
    color: #ffffff;
  }
  .right-icon .img {
    width: 50rpx;
    height: 50rpx;
  }
</style>